<template>
  <view class="container">
    <!-- 导航栏 -->
    <sc-navbar back title="钉盒管理" />

    <!-- 主要内容区域 -->
    <glo-gutter>
      <!-- 搜索栏 -->
      <glo-search placeholder="按钉盒名称/编码/厂家/仓库搜索" show-filter show-scan @clear="handleSearch"
        @filter="showSidebarPopup = true" @scan="handleScan" @search="handleSearch" />

      <!-- 钉盒列表 -->
      <glo-chunk v-for="item in listData.list" :key="item.id" @click="handleDetail(item)">
        <!-- 标题行 -->
        <sc-flex ai="center" jc="between">
          <sc-flex ai="center" col-gap="22">
            <glo-title :title="item.nailboxName" />
            <glo-tag :text="ProductStatusLabel[item.nailboxStatus]" />
          </sc-flex>
          <sc-icon name="arrow-right" color="primary" size="20" />
        </sc-flex>

        <!-- 内容行 -->
        <sc-flex ai="center" col-gap="19" mt="15" width="100%">
          <sc-image :src="item.nailboxImageAddress" height="112" width="112" />
          <glo-info :info="getItemInfo(item)" />
        </sc-flex>
      </glo-chunk>
    </glo-gutter>

    <!-- 底部操作栏 -->
    <sc-footer col-gap="45" height="150">
      <sc-button height="75" type="grey-blue" width="262" @click="handleReplenish('consignment')">
        寄售补货
      </sc-button>
      <sc-button height="75" type="primary" width="262" @click="handleReplenish('replenishManage')">
        补货
      </sc-button>
    </sc-footer>

    <!-- 侧边筛选栏 -->
    <glo-sidebar-filter v-model:show="showSidebarPopup" :layout="sidebarConfig" v-model:params="listData.params"
      @filter="handleFilter" @reset="handleReset" />
  </view>
</template>

<script setup>

import { ProductStatusLabel } from "@/commons/enums";

// 筛选弹窗显示状态
const showSidebarPopup = ref(false);

// 筛选配置
const sidebarConfig = ref([
  {
    type: "select",
    placeholder: "请选择内容",
    key: "productCategory",
    label: "商品大类"
  },
  {
    type: "select",
    placeholder: "请选择内容",
    key: "productSubcategory",
    label: "商品类别"
  },
  {
    type: "select",
    placeholder: "请选择内容",
    key: "surgeryType",
    label: "手术类型"
  },
  {
    type: "select",
    placeholder: "请选择内容",
    key: "warehouseName",
    label: "仓库名称"
  },
  {
    type: "select",
    placeholder: "请选择内容",
    key: "manufacturerName",
    label: "厂家-品牌"
  }
]);

// 页面数据
const listData = reactive({
  list: [],           // 钉盒列表
  total: 0,           // 总数量
  params: {           // 查询参数
    pageNo: 1,
    pageSize: 10,
    commonSerchName: undefined,     // 公共搜索名称
    productCategory: undefined,     // 商品大类
    productSubcategory: undefined,  // 商品类别
    surgeryType: undefined,         // 手术类型
    warehouseName: undefined,       // 仓库名称
    manufacturerName: undefined    // 厂家-品牌
  }
});


/**
 * 获取钉盒项的信息配置
 * @param {Object} item - 钉盒数据项
 * @returns {Array} 信息配置数组
 */
const getItemInfo = (item) => {
  return [
    {
      type: "single",
      label: "钉盒编码",
      value: item.nailboxCode
    },
    {
      type: "single",
      label: "钉盒条码",
      value: item.nailboxBarcode
    },
    {
      type: "multiple",
      grid: "1fr 1.2fr",
      list: [
        {
          type: "single",
          label: "所含数量",
          value: item.containCount
        },
        {
          type: "single",
          label: "剩余数量",
          value: item.remainingCount
        }
      ]
    },
    {
      type: "single",
      label: "生产厂家",
      value: item.manufacturerName
    }
  ];
};

/**
 * 获取钉盒列表数据
 * @param {Object} config - 额外的查询参数
 */
const getList = async () => {
  _api.getDingHeList(listData.params).then(res => {
    listData.list = res.list || [];
    listData.total = res.total || 0;
  })
};


/**
 * 跳转到钉盒详情页
 * @param {Object} item - 钉盒数据项
 */
const handleDetail = (item) => {
  uni.navigateTo({
    url: `/subDingHe/pages/dingHeDetail?id=${item.id}`
  });
};

/**
 * 处理搜索
 * @param {String} keyword - 搜索关键词
 */
const handleSearch = (keyword) => {
  listData.params.commonSerchName = keyword;
  listData.params.pageNo = 1;  // 重置页码
  getList();
};

/**
 * 处理扫码功能
 */
const handleScan = () => {
  uni.scanCode({
    success: (res) => {
      console.log("扫码结果:", res.result);
      handleSearch(res.result);
    },
    fail: (err) => {
      console.log("扫码失败:", err);
      uni.showToast({
        title: "扫码失败",
        icon: "none"
      });
    }
  });
};

/**
 * 处理补货操作
 * @param {String} type - 寄售补货 'consignment' | 补货 'replenishManage'
 */
const handleReplenish = (type) => {
  uni.navigateTo({
    url: `/subDingHe/pages/${type}`
  });
};

/**
 * 处理筛选操作
 */
const handleFilter = () => {
  listData.params.pageNo = 1;  // 重置页码
  getList();
};

/**
 * 处理重置筛选条件
 */
const handleReset = () => {
  listData.params.pageNo = 1;  // 重置页码
  getList();
};


onLoad(() => {
  getList();
});
</script>
<style lang="scss">
page {
  background: $color-bg;
}
</style>
